<!-- 导航树 -->
<template>
  <div>
    <ElTree
      v-if="store.state.editor.eidtorRef"
      node-key="id"
      :data="store.state.editor.eidtorRef.titles"
      :props="treeProps"
      @node-click="nodeClick"
      :indent="10"
      ref="treeRef"
    >
      <template #default="{ node, data }: any">
        <span class="truncate w-full" :class="'pl-' + data.indent * 3">
          {{ node.label }}
        </span>
      </template>
    </ElTree>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "@/store/index"
import { ElTree } from "element-plus"
import { NavItemType } from "./type"
const store = useStore()
const treeProps: any = {
  label: "title",
  disabled: "disabled",
}

const nodeClick = (data: NavItemType) => {
  const lineDom = document.querySelector(`[data-v-md-line="${data.lineIndex}"]`)
  store.state.editor.eidtorRef.previewScrollTo(
    (lineDom as HTMLElement).offsetTop
  )
  store.commit("fileTree/switchFileTree", false)
}
</script>

<style lang="scss" scoped>
:deep(.el-tree-node__content) {
  font-size: 14px;
  padding: 1rem;
  width: 100%;
}
</style>
